<template>
  <div class="right-nav">
    <div class="l-menu">
      <ul class="clearfix l-menu-wrap">
        <li class="my-info">
          <Icon type="android-contact"></Icon>
          <p class="cover">
            我的信息
          </p>

          <div class="user-box">
            <div class="top">
              <h6>用户信息</h6>
              <div class="user-main">
                <div class="fl avatar">
                  <img src="/static/images/dot.jpg" alt="..." />
                  <a href="#" class="gradient">修改资料</a>
                </div>

                <div class="user-info">
                  <p class="user-name g-mt5">用户名称</p>
                  <span>普通会员</span>

                  <p class="line active g-mt40"><a href="#" class="link-wrap">手机已验证</a></p>
                  <p class="line"><a href="#" class="link-wrap">邮箱未验证</a></p>
                </div>
              </div>
            </div>

            <div class="bottom g-mt20">
              <h6>最近交易 <a href="#" class="more link">more</a></h6>
              <div class="lately y">
                <div class="nothing">
                  空空如也<a href="#" class="link">去登陆</a>
                </div>

                <div class="list">
                  <table class="pro-table">
                    <thead>
                    <tr>
                      <td class="width110">商品名称</td>
                      <td class="width75">状态</td>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                      <td>
                        <a href="#" class="link-wrap">
                          <img src="/static/images/dot.jpg" alt="..." />
                          <p class="pro-name">商品名称</p>
                        </a>
                      </td>

                      <td>
                        <span>交易中</span>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="my-cart">
          <Icon type="android-contact"></Icon>
          <p class="cover">
            我的购物
          </p>
        </li>
        <li class="my-server">
          <Icon type="android-contact"></Icon>
          <p class="cover">
            我的客服
          </p>
        </li>
        <li class="my-eye">
          <Icon type="android-contact"></Icon>
          <p class="cover">
            我的浏览
          </p>
        </li>
      </ul>
    </div>

    <div class="r-menu">
      <Icon type="android-close close"></Icon>
      <div class="r-menu-wrap">
        <div class="cart-slide-head g-mt40">
          <h5>购物车</h5>
          <div class="handle g-mt20">
            <p class="select-all">
              <input type="checkbox" class="checkbox"/>
              <span>全选</span>
            </p>

            <button class="more-btn">查看更多+</button>
          </div>
        </div>

        <div class="cart-slide-body">
          <table class="table">
            <tr>
              <td class="input">
                <input type="checkbox" class="checkbox"/>
              </td>
              <td class="pic">
                <a href="#" class="link-wrap">
                  <img src="/static/images/dot.jpg" alt="..."/>
                </a>
              </td>
              <td class="type">
                类型一
              </td>
              <td class="num">
                num
              </td>
              <td class="price">
                ￥155.00
              </td>
            </tr>
          </table>
        </div>

        <div class="cart-slide-foot">
          <p class="count">
            已经选择<em>11</em>件商品
            <span class="count-price">
                        ￥<em>0.00</em>
                    </span>
          </p>

          <p class="settle g-mt10">
            <a href="#" class="link-wrap">
              结算
              <i class="fa fa-rotate-right"></i>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import $ from 'jquery'
  import {getElementTop, getElementLeft} from 'common/js/dom'

  export default {
    props: {
      status: {
        type: Boolean,
        default: false
      },
      username: {
        type: String,
        default: ''
      },
      avatar: {
        type: String,
        default: '/static/images/dot.jpg'
      }
    },
    data() {
      return {}
    },
    created() {
      this._bindEvent()
    },
    methods: {
      _bindEvent() {
        let _vue = this
        $(function () {

          _vue.autoAlign()

          $('.my-cart').click(function () {
            _vue.slideShow()
          })

          $('.ivu-icon-android-close').click(function(){
            _vue.slideHide()
          })

          $('.my-info').click(function () {
            $(this).find('.user-box').toggleClass('active')
          })

          $(window).on('resize', function () {
            _vue.autoAlign()
          })
        })
      },
      autoAlign: function () {
        let El = $('.right-nav').find('.l-menu-wrap')
        let H = window.innerHeight - 60
        let ElH = El.height();

        El.css({top: ~~((H - ElH) / 2)})
      },
      slideShow: function () {
        $('.right-nav').animate({right: 0});
      },
      slideHide: function () {
        $('.right-nav').animate({right: -209});
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@/common/stylus/variable.styl"
  @import "~@/common/stylus/mixin.styl"

  .right-nav
    position: fixed
    right: -209px
    top: 60px
    bottom: 0
    z-index: 99
    wh(251px, 100%)
    .l-menu
      position: relative
      float: left
      wh(42px, 100%)
      background-color: $vice-color
      .l-menu-wrap
        ltposition(0, 0)
        width: 100%
        li
          position: relative
          wh(100%, 55px)
          line-height: 55px
          text-align: center
          font-size: $font-small-x
          color: $white
          &:hover
            .cover
              display: block
        .cover
          display: none
          position: absolute
          left: 0px
          top: 0
          padding: 14px 5px
          line-height: 14px
          background-color: $white
          color: $back
          cursor: pointer
    .r-menu
      rtposition(0, 0px)
      left: 42px
      height: 100%
      padding: 20px 10px
      background-color: #555
      .close
        rtposition(20px, 20px)
        font-weight: bold
        sc($font-large-x, $white)
        cursor: pointer;
      i.fa-close
        rtposition(10px, 10px)
        font-size: $font-medium-x
        cursor: pointer
      .cart-slide-head
        h5
          sc($font-small-x, $white)
          text-align: center
        .handle
          position: relative
          padding-bottom: 10px
          border-bottom: 1px solid #eee
          .select-all
            width: 100%
            padding: 5px 0
            .checkbox
              position: relative
              top: -1px
              vertical-align: bottom
            span
              vertical-align: bottom
          .more-btn
            rtposition(0, 5px)
            padding: 1px 10px
            br(10px)
            color: $white
            cursor: pointer
            &.active
              background-color: $vice-color
              cursor: pointer
      .cart-slide-body
        ltposition(10px, 147px)
        right: 10px
        bottom: 224px
        .table
          display: block
          width: 100%
          td
            vertical-align: middle
            color: $white
            no-wrap()
            &.pic
              img
                wh(40px, 40px)
                padding: 5px
            &.type
              padding: 0 2px
            &.num
              padding: 0 3px
            &.price
              padding: 0 4px
      .cart-slide-foot
        lbposition(10px, 79px)
        right: 10px
        .count
          position: relative;
          hh(22px)
          background-color: #eee
          color: $back
          text-indent: 5px
          br(4px)
          .count-price
            rtposition(5px, 0)
            color: $vice-color
        .settle
          hh(38px)
          background-color: #e4e4e4
          a.link-wrap
            text-align: center
            font-weight: bold
            sc($font-medium, $white)
            br(4px)
          &.active
            background-color: $vice-color
    .user-box
      display: none
      background-color: $white
      ltposition(-211px, -1px)
      wh(210px, 270px)
      padding: 10px
      line-height: 1
      border: 1px solid #ccc
      border-right: none
      box-shadow: 0 0 5px 0 $vice-color
      text-align: left
      sc($font-small, $back)
      &.active
        display: block
      h6
        position: relative
        sc($font-medium, $back)
      a.more
        rtposition(0, 0)
        sc($font-small, $vice-color)
        &:hover
          text-decoration: underline
      .user-main
        margin-top: 15px
        .avatar
          img
            wh(66px, 84px)
          a
            display: block
            width: 60px
            hh(20px)
            margin: 10px auto 0
            border: 1px solid #aaa
            br(2px)
            text-align: center
        .user-info
          margin-left: 81px
          overflow: hidden
          p.user-name
            sc($font-small-x, $back)
            font-weight: bold
            no-wrap()
          p.line
            hh(14px)
            text-align: left
            no-wrap()
            a
              color: $vice-color
            &.active
              a
                color: #207dab
            &:last-child
              margin-top: 3px
          span
            display: block
            margin-top: 15px
            color: #aaa
      .lately
        margin-top: 15px
        .nothing
          padding: 20px
          text-align: center
          color: #aaa
          a.link
            padding-left: 5px
            color: $vice-color
            &:hover
              text-decoration: underline
        .pro-table
          text-align: left
          thead
            font-weight: bold
          .link-wrap
            img
              float: left
              wh(30px, 30px)
              margin: 10px 5px 0
            p.pro-name
              margin: 10px 0 0 40px
              line-height: 14px
              color: #aaa
              no-wrap()
          span
            color: $vice-color
        &.y
          .nothing
            display: none
          .list
            display: block
        &.n
          .nothing
            display: block
          .list
            display: none
      &:after
        content: ''
        rtposition(-16px, 16px)
        triangle-right(8px, #fff)
      &.active
        display: block
  .width110
    width: 110px
  .width75
   width: 75px
</style>